<!--
 * @Author: HZH
 * @Date: 2021-09-16 14:16:01
 * @LastEditors: HZH
 * @LastEditTime: 2021-09-17 15:34:07
 * @Description: 
-->
<template>
  <div class="header">
    <div class="header_top">
      <div class="wrapper">
        <div class="left">xxx网站欢迎你</div>
        <div class="right">门户主页</div>
      </div>
    </div>
    <div class="header_bottom">
      <div class="wrapper">
        <div class="logo" @click="toHome">
          <img src="../../../public/QQ图片20210917110355.png" alt="" />
        </div>
        <ul class="menu">
          <li @click="toList(c)" v-for="c in category" :key="c.id">{{c.name}}</li>
            
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {get} from '../../utils/request'
export default {
  data() {
    return {
      category:[],
      // categorys:{
        
      // }
    }
  },
  methods: {
    getCategorydata(){
      get('/index/category/findAll').then(res => {
        // console.log(res);
        this.category = res.data
        // console.log(this.category);
      })
    },
    toList(c){
      this.$router.push({
        // 要跳转的路由
        path:'/list',
        query:c
        // 要传递的参数
      })
    },
    toHome(){
      this.$router.push('/')
    }
  },
  created() {
    this.getCategorydata();
  },
};
</script>

<style lang="scss" scoped>
.header {
  .header_top {
    background-color: #528c38;
    .wrapper {
      color: white;
      font-size: 16px;
      font-weight: 600;
      .left {
        float: left;
      }
      .right {
        float: right;
      }
    }
    .wrapper::after {
      display: block;
      content: "";
      clear: both;
    }
  }
  .header_bottom {
    margin-top: 15px;
    .wrapper {
      display: flex;
      justify-content: space-between;
      .logo {
        flex: 1;
        img {
          width: 200px;
        }
      }
      .menu {
        flex: 2;
        li {
          float: left;
          margin-left: 20px;
          line-height: 35px;
          padding: 0.5em;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>